import React, { Component } from 'react';
import { connect } from 'react-redux';
import { NavBar } from 'antd-mobile';
import { MessageOutline, BellOutline } from 'antd-mobile-icons';
import PropTypes from 'prop-types';
import styles from './Header.module.less';

class Header extends Component {
  static propTypes = {
    title: PropTypes.string,
    showBack: PropTypes.bool,
    showRight: PropTypes.bool,
    onBack: PropTypes.func,
    currentPage: PropTypes.string,
  };

  static defaultProps = {
    title: '应用标题',
    showBack: false,
    showRight: true,
    onBack: null,
    currentPage: 'homePage',
  };

  handleBack = () => {
    if (this.props.onBack) {
      this.props.onBack();
    } else {
      window.history.back();
    }
  };

  renderRight = () => {
    const { showRight } = this.props;
    if (!showRight) return null;

    return (
      <div className={styles.rightContent}>
        <MessageOutline className={styles.icon} />
        <BellOutline className={styles.icon} />
      </div>
    );
  };

  render() {
    const { title, showBack, currentPage } = this.props;

    return (
      <NavBar
        className={styles.header}
        back={showBack ? '' : null}
        onBack={showBack ? this.handleBack : undefined}
        right={this.renderRight()}
      >
        {title}
      </NavBar>
    );
  }
}

const mapStateToProps = (state) => ({
  currentPage: state.app.currentPage,
});

export default connect(mapStateToProps)(Header);
